<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { getAllUserService, updateStateService, silenceService, suspendService } from '@/api/user'

const tableData = reactive([])

const search = ref('')
const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase()) || data.id.toLowerCase().includes(search.value.toLowerCase())
    )
)


const pageNum = ref(1)
const total = ref(20)
const pageSize = ref(10)

async function getUserList() {
    tableData.length = 0
    let result = await getAllUserService(pageNum.value, pageSize.value)
    // if (result.code === 0) {
    total.value = result.data.total
    tableData.values = result.data
    for (let i = 0; i < result.data.items.length; i++) {
        tableData.push(result.data.items[i])
    }
}
getUserList()


const onSizeChange = (size) => {
    pageSize.value = size
    getUserList()
}
const onCurrentChange = (num) => {
    pageNum.value = num
    getUserList()
}

const banForm = reactive({
    day: null,
    hour: null,
    minute: null
})


const cancelBan = async () => {
    banForm.day = null
    banForm.hour = null
    banForm.minute = null
}

const silence = async (id) => {
    let minute = banForm.day * 24 * 60 + banForm.hour * 60 + banForm.minute
    // console.log(minute)
    if (minute <= 0) {
        ElMessage.warning("封禁时长不可小于1分钟")
    } else {
        await silenceService(id, minute)
        ElMessage.success("禁言成功")
        getUserList()
    }
    cancelBan()
}

const suspend = async (id) => {
    let minute = banForm.day * 24 * 60 + banForm.hour * 60 + banForm.minute
    if (minute <= 0) {
        ElMessage.warning("封禁时长不可小于1分钟")
    } else {
        await suspendService(id, minute)
        ElMessage.success("封号成功")
        getUserList()
    }
    cancelBan()
}

const updateState = async (id) => {
    await updateStateService(id)
    ElMessage.success("解封成功")
    getUserList()
}

</script>



<template>
    <div style="width: 100%;padding:25px;">
        <div style="display: flex;padding-bottom: 20px;padding-top: 10px;">
            <el-input v-model="search" placeholder="搜索用户信息" style="width: 200px;margin-left:100vh;" />
        </div>

        <el-table :data="filterTableData" border stripe>
            <el-table-column label="头像" width="100px">
                <template #default="scope">
                    <!-- <el-avatar :size="50" :src="scope.row.img" /> -->
                    <el-image style="width:75px" :src="scope.row.img" fit="cover" :preview-src-list="srcList" />
                </template>

            </el-table-column>
            <el-table-column label="ID" prop="id" width="100px" sortable />
            <el-table-column label="邮箱" prop="email" />
            <el-table-column label="昵称" prop="name" />
            <el-table-column label="性别" prop="sex" width="80px" />
            <el-table-column label="年龄" prop="age" width="80px" />
            <el-table-column label="民族" prop="ethnic" width="80px" />
            <el-table-column label="账号状态" width="80px">
                <template #default="scope">
                    <i v-if="scope.row.state == 0" style="color: lightgreen;">正常</i>
                    <i v-if="scope.row.state == 1" style="color: orange;">禁言</i>
                    <i v-if="scope.row.state == 2" style="color: brown;">封号</i>
                </template>
            </el-table-column>
            <el-table-column label="封禁时间" prop="time" />

            <el-table-column label="操作" align="center" width='200px'>
                <template #default="scope">

                    <el-popover placement="right" :width="400" trigger="click">
                        <template #reference>
                            <el-button style="margin-right: 16px" v-if="scope.row.state == 0"
                                type="warning">禁言</el-button>
                        </template>
                        <el-form :inline="true" :model="banForm" label-width="auto">
                            <el-form-item label="封禁时长/天">
                                <el-input-number v-model="banForm.day" placeholder="封禁的天数" :min="0" clearable />
                            </el-form-item>
                            <el-form-item label="封禁时长/小时">
                                <el-input-number v-model="banForm.hour" placeholder="封禁的小时" :min="0" :max="23"
                                    clearable />
                            </el-form-item>
                            <el-form-item label="封禁时长/分钟">
                                <el-input-number v-model="banForm.minute" placeholder="封禁的分钟" :min="0" :max="59"
                                    clearable />
                            </el-form-item>
                        </el-form>
                        <el-form-item>
                            <el-button type="primary" @click="silence(scope.row.id)">确认</el-button>
                            <el-button @click="cancelBan">取消</el-button>
                        </el-form-item>
                    </el-popover>

                    <el-popover placement="right" :width="400" trigger="click">
                        <template #reference>
                            <el-button style="margin-right: 16px" v-if="scope.row.state < 2"
                                type="danger">封号</el-button>
                        </template>
                        <el-form :inline="true" :model="banForm" label-width="auto">
                            <el-form-item label="封禁时长/天">
                                <el-input-number v-model="banForm.day" placeholder="封禁的天数" :min="0" clearable />
                            </el-form-item>
                            <el-form-item label="封禁时长/小时">
                                <el-input-number v-model="banForm.hour" placeholder="封禁的小时" :min="0" :max="23"
                                    clearable />
                            </el-form-item>
                            <el-form-item label="封禁时长/分钟">
                                <el-input-number v-model="banForm.minute" placeholder="封禁的分钟" :min="0" :max="59"
                                    clearable />
                            </el-form-item>
                        </el-form>
                        <el-form-item>
                            <el-button type="primary" @click="suspend(scope.row.id)">确认</el-button>
                            <el-button @click="cancelBan">取消</el-button>
                        </el-form-item>
                    </el-popover>

                    <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled" icon-color="red"
                        title="确认要手动解封此用户吗？" @confirm="updateState(scope.row.id)">
                        <template #reference>
                            <el-button type="primary" v-if="scope.row.state != 0">解封</el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>

        <div style="margin: 10px 0;">
            <el-pagination v-model:current-page="pageNum" v-model:page-size='pageSize' :page-sizes="[5, 10, 20]"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="onSizeChange"
                @current-change="onCurrentChange" />
        </div>
    </div>

</template>
